<template>
  <div class="chart-root-wrapper">
    <div class="chart-title-wrapper">
      <div class="chart-title">扇区时间&nbsp;({{ sourceSector.summary }}h)</div>
      <div class="chart-options">
        <el-radio-group v-model="showTable" size="small">
          <el-radio :value="false">图表</el-radio>
          <el-radio :value="true">数值</el-radio>
        </el-radio-group>
      </div>
    </div>
    <div class="chart-content-wrapper">
      <v-chart
        v-if="sourceSector != null && !hideChart && showChart && !showTable"
        style="width: 500px; height: 400px"
        :option="option"
        ref="chart"
      />
      <el-empty v-if="hideChart" description="数据过大，已关闭图表"></el-empty>
      <el-descriptions
        v-if="source != null && showChart && showTable"
        :column="2"
        border
        style="width: 100%"
      >
        <el-descriptions-item
          v-for="item in tableData"
          :label="
            !isNaN(parseFloat(item.name)) ? item.name + ' 扇区' : item.name
          "
        >
          <span>{{ item.value }}&nbsp;小时</span>
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <!-- <pre>{{ option }}</pre> -->
  </div>
</template>

<script setup>
import { ref, computed, onMounted, nextTick } from "vue";
import dayjs from "dayjs";
import useHourStore from "@/store/hour.js";
// import fetchSectors from "./fetchSectors.js";

// import echarts
import * as echarts from "echarts/core";
import { SVGRenderer, CanvasRenderer } from "echarts/renderers";
import { PieChart } from "echarts/charts";
import { TooltipComponent } from "echarts/components";
import { LabelLayout } from "echarts/features";
import VChart, { THEME_KEY } from "vue-echarts";

echarts.use([CanvasRenderer, PieChart, LabelLayout]);

const hourStore = useHourStore();

const source = computed(() => hourStore.generalViewConfigs.source);
const sourceSector = computed(() => hourStore.generalViewConfigs.sourceSector);

const showTable = ref(false);

const showChart = ref(true);

const hideChart = computed(() => {
  if (source.value == null) {
    return false;
  } else if (
    source.value.content &&
    (source.value.count > 1000 || source.value.content.length > 1000)
  ) {
    return true;
  }
});

const handleRedraw = async () => {
  showChart.value = false;
  await nextTick();
  showChart.value = true;
};

const tableData = computed(() => {
  let data = new Array();
  data.push(...myData.value.inner);
  data.push(...myData.value.outer);
  return data;
});

const myData = computed(() => {
  let tmp = {};
  sourceSector.value.values.forEach((value) => {
    if (value) {
      if (tmp[value]) {
        tmp[value] += 0.5;
      } else {
        tmp[value] = 0.5;
      }
    }
  });
  let data = Object.keys(tmp).map((label) => {
    return { name: label, value: tmp[label] };
  });
  data.sort((a, b) => a.name - b.name);
  return {
    outer: data,
    inner: [
      {
        name: "一室扇区时",
        value: sourceSector.value.summary1,
        selected: sourceSector.value.summary1 < sourceSector.value.summary2,
      },
      {
        name: "二室扇区时",
        value: sourceSector.value.summary2,
        selected: sourceSector.value.summary1 > sourceSector.value.summary2,
      },
    ],
  };
});

const option = computed(() => {
  let padding = 16;

  return {
    series: [
      {
        name: "扇区数比例INNER",
        type: "pie",
        radius: [0, "55%"],
        roseType: "radius",
        selectedMode: "multiple",
        label: {
          show: true,
          position: "inner",
          color: "#fff",
          textBorderColor: "rgba(0,0,0,0.25)",
          textBorderWidth: 2,
          textShadowColor: "#000",
          textShadowBlur: 10,
          fontWeight: "bold",
          formatter: "{b}\n{c}小时\n{d}%",
        },
        itemStyle: {
          borderRadius: 12,
        },
        emphasis: {
          scale: true,
          scaleSize: 12,
          focus: "self",
        },
        data: myData.value.inner,
      },
      {
        name: "扇区数比例OUTER",
        type: "pie",
        radius: ["65%", "80%"],
        roseType: "radius",
        label: {
          show: true,
          color: "rgb(128,128,128)",
          fontWeight: "bold",
          width: 120,
          formatter: "{b}扇区\n{c}小时\n{d}%",
        },
        labelLine: {
          show: true,
          length: 10,
          length2: 20,
          smooth: true,
        },
        itemStyle: {
          borderRadius: 12,
        },
        emphasis: {
          scale: true,
          scaleSize: 12,
          focus: "self",
        },
        data: myData.value.outer,
      },
    ],
  };
});
</script>

<style scoped>
@import "./chartStyles.css";
</style>
